<template>
  <div class="author-box">
    <a-card class="author-intro-card">
      <p style="font-weight: bold">博主介绍</p>
      <a-avatar :size="100" src="/images/avatar.jpg" />
      <p class="avatar-name">张童瑶</p>
      <p><a-icon type="tool"></a-icon>在校研究生</p>
      <p><a-icon type="environment"></a-icon>湖北 武汉</p>
      <p>
        <a-icon type="tags"></a-icon>
        <a-tag color="blue">地理加权回归分析</a-tag>
        <a-tag color="red">前端开发</a-tag>
        <a-tag color="purple">nodejs</a-tag>
        <a-tag color="green">空间交互</a-tag>
      </p>
      <a-divider>社交账号</a-divider>
      <a-tooltip>
        <template slot="title"> https://github.com/GiserDeveloper </template>
        <a href="https://github.com/GiserDeveloper" target="view_window"><a-avatar :size="28" icon="github" class="account"></a-avatar></a>
      </a-tooltip>
      <a-tooltip>
        <template slot="title">
          https://www.zhihu.com/people/zhang-tong-yao-66
        </template>
        <a href="https://www.zhihu.com/people/zhang-tong-yao-66" target="view_window"><a-avatar :size="28" icon="zhihu" class="account"></a-avatar></a>
      </a-tooltip>
      <a-tooltip>
        <template slot="title"> QQ:864443272 </template>
        <a-avatar :size="28" icon="qq" class="account"></a-avatar>
      </a-tooltip>
      <a-tooltip>
        <template slot="title"> weChat:zty </template>
        <a-avatar :size="28" icon="wechat" class="account"></a-avatar>
      </a-tooltip>
    </a-card>
  </div>
</template>

<script>
export default {
  name: "Author",
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.author-intro-card {
  text-align: center;
  p {
    text-align: left;
    .anticon {
      margin-right: 5px;
    }
    .ant-tag {
      margin-bottom: 8px;
    }
  }
  .avatar-name {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
  }
  .account {
    background-color: #999;
    margin-left: 8px;
    margin-right: 8px;
  }
}
</style>